<template>
  <div  class="yxp-composition">
    <div class="yxp-composition-box">
      <img id="yxp-index-btn" class="back-prev" src="@/assets/xiezuo/left-jiantou.png" @click="handleBack"/>
      <div class="xiezuo-title">轻松写作
      </div>
      <div style="display: flex;justify-content: center;">
        <div class="boxs" @click.stop="handleChange">
          <img alt="" src="@/assets/home/qiehuan.png" style="width: 30px;height: 30px" @click="handleChange"/>
          <span style=" cursor: pointer;
        font-size: 20px;">{{  "请先选择课程" }}</span>
        </div>
      </div>
      <!--      <div class="xiezuo-desc">智能训练系统</div>-->
      <div class="xiezuo-main">
        <div class="imgbox">
          <img src="@/assets/xiezuo/xiezuo_home_bg.png" style="width: 80%"/>
          <div class="contents">
            <div class="ContentS_one">
              <div class="b1">
                <div class="s6">
                  上次学习
                </div>
                <div v-if="id > 0 && indexInfo.last.unit">
                  {{ indexInfo.last.unit }} {{ indexInfo.last.model }}
                </div>
                <div v-if="id <= 0 || !indexInfo.last.unit">
                  暂无
                </div>
              </div>
              <div class="b1">
                <div class="s6">
                  累计已学
                </div>
                <div>
                  <em>{{ indexInfo.note_num }}</em>篇
                </div>
              </div>
            </div>
            <div class="b1s"  @click="handleModel">
              开始学习
            </div>
          </div>
        </div>
        <!--        <div class="xiezuo-left-col">-->
        <!--          <div class="xiezuo-status">-->
        <!--            <div class="xiezuo-status-item">-->
        <!--              <p class="total-study-num">-->
        <!--                <em>{{ indexInfo.note_num }}</em>篇-->
        <!--              </p>-->
        <!--              <p class="total-study-text">累计已学</p>-->
        <!--            </div>-->
        <!--            <div class="xiezuo-status-item">-->
        <!--              <p class="total-study-num" v-if="id > 0 && indexInfo.last.unit">-->
        <!--                <span class="last-unit">{{ indexInfo.last.unit }}</span>-->
        <!--                <span class="last-model">{{ indexInfo.last.model }}</span>-->
        <!--              </p>-->
        <!--                      <p class="total-study-num" v-if="id <= 0 || !indexInfo.last.unit">暂无</p>-->
        <!--                      <p class="total-study-text">上次学习</p>-->
        <!--            </div>-->
        <!--            <div class="xiezuo-status-item">-->
        <!--              <p class="total-study-num">-->
        <!--                <em>{{ indexInfo.time }}</em>-->
        <!--              </p>-->
        <!--              <p class="total-text">学习时长(h)</p>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="xiezuo-main-col">-->
        <!--          <div class="xiezuo-main-col-box" id="yxp-index-btn2" @click="handleModel">-->
        <!--            <img src="@/assets/xiezuo/xiezuo_home_bg.png"/>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="xiezuo-right-col">-->
        <!--          <p>-->
        <!--            hello-->
        <!--          </p>-->
        <!--        </div>-->
      </div>
    </div>
    <div v-if="isShow" class="mark"></div>
    <div v-if="isShow" class="app-writing-pop">
      <img class="close" src="@/assets/word/close-icon.png" @click="isShow = false"/>
      <div class="yxp-writing-main">
        <div v-if="course.length > 0" class="select-course">
          <p v-for="(item,i) in course" :Key="item.id" :class="{active: curIndex === i}" class="select-course-item"
             @click="handleCourse(item,i)">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'composition',
  data() {
    return {
      brand_info: null,
      curIndex: -1, //课程默认显示
      title: '',
      id: -1, // 课程id
      isShow: false,
      course_type: 0,
      course: [], // 课程列表
      lastInfo: {}, // 上次课程信息
      indexInfo: {},
      brank_skin: null,
      air_xz_page_style: '',
    }
  },
  computed: {
  },
  components: {
  },
  created() {
    // let skin_config = storage.get('mfy_brand_config');
    // this.brand_info = skin_config;
    // if (skin_config.single_user_data) {
    //   this.brank_skin = 1;
    //   this.brank_logo = skin_config.air_light_logo_url;
    // }
    // if (skin_config.air_xz_page_style) {
    //   this.brank_skin = 1;
    //   this.air_xz_page_style = skin_config.air_xz_page_style;
    //   this.brank_logo = skin_config.air_light_logo_url;
    // }
    // this.getLastCourse()
  },
  methods: {
    // 选择课程
    handleCourse(item, i) {
      this.curIndex = i
      this.title = item.title
      this.id = item.id
      this.course_type = item.course_type
      console.log(this.id)
      this.isShow = false
      this.getIndexInfo(item.id)
    },
    handleChange() {
      this.getCourseList()
    },
    handleModel() {
      console.log(this.course_type)
      if (this.title === '') {
        this.$toast('请选择课程')
        return
      }
      this.$router.push({
        path: "/composition/courseList",
        query: {
          id: this.id
        }
      })
    },
    async getLastCourse() {
      this.$loading.show()
      let data = await lastCourse()
      if (data.code === 1) {
        let result = data.data
        if (result.id === 0 || result.id === '') {
          this.getCourseList()
        } else {
          this.id = result.id
          this.title = result.title
          this.indexInfo = data.data
          this.course_type = data.data.type
          this.getIndexInfo(result.id)
        }
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    async getCourseList() {
      let params = {
        question_type: 4
      }
      let data = await courseList(params)
      if (data.code === 1) {
        this.$loading.hide()
        this.course = data.data
        if (this.course.length === 0) {
          this.$toast('请购买课程')

        } else {
          this.isShow = true
        }
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    async getIndexInfo(id) {
      let params = {
        id: id
      }
      let data = await indexInfo(params)
      if (data.code === 1) {
        this.id = data.data.id
        this.title = data.data.title
        this.$loading.hide()
        this.indexInfo = data.data
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    handleBack() {
      this.$router.push({
        path: '/work/studytype'
      })
      }
  }
}
</script>
<style scoped>
.yxp-composition {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/super-read/index-bg.png');
  box-sizing: border-box;
  background-size: cover;
  min-height: 600px;
}
.yxp-composition-box {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 30px;
}
.yxp-composition-box .back-prev {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 30px;
  height: 27px;
  background-image: url("@/assets/home/btn_back.png");
  background-size: 100%;
  cursor: pointer;
}
.xiezuo-title {
  position: relative;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  margin: 0 1rem;
  color: #000;
}
.boxs {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ccc;
  width: 225px;
  border-radius: 10px;
}
.xiezuo-desc {
  font-size: 20px;
  font-weight: bold;
  color: #1fad9b;
}
.xiezuo-select-course {
  display: block;
  font-size: 16px;
  line-height: 16px;
  position: relative;
  margin-top: 32px;
  color: #666666;
  text-align: center;
}
.xiezuo-select-course .arrow-right {
  position: absolute;
  height: 12px;
  width: 6px;
  right: -10px;
}
.xiezuo-select-course-text {
  height: 40px;
  font-size: 20px;
  color: #666666;
  line-height: 42px;
}
.xiezuo-select-course-default-text {
  margin-top: 5px;
  color: #666666;
  font-size: 15px;
  display: inline-block;
  position: relative;
}
.app-writing-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  background: #fff;
  border-radius: 10px;
  z-index: 1000;
}
.app-writing-pop .close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.app-writing-pop .select-course {
  text-align: center;
  margin-bottom: 30px;
}
.app-writing-pop .select-course::-webkit-scrollbar {
  width: 0 !important;
}
.app-writing-pop .select-course .active {
  color: #27BFA3;
}
.app-writing-pop .select-course-item {
  font-size: 24px;
  font-weight: 400;
  color: #333333;
  margin: 40px 0 20px;
  cursor: pointer;
}
.imgbox {
  position: relative;
  text-align: center;
  width: 100%;
}
.contents {
  width: 30%;
  height: 195px;
  position: absolute;
  bottom: 33px;
  right: 178px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ContentS_one {
  display: flex;
  justify-content: space-around;
  height: 105px;
  font-weight: 900;
}
.b1 {
  display: flex;
  color: #262626;
  font-size: 20px;
  flex-direction: column;
  justify-content: space-around;
}
.s6 {
  color: #606060;
  font-size: 16px;
}
.b1s {
  height: 50px;
  line-height: 50px;
  font-size: 32px;
}
.xiezuo-main {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-around;
  padding-top: 100px;
}
.xiezuo-main .xiezuo-left-col {
  width: 200px;
  height: 356px;
  background: #FFFFFF;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
}
.xiezuo-main .xiezuo-main-col .xiezuo-main-col-box {
  cursor: pointer;
  margin-top: 7px;
}
.xiezuo-main .xiezuo-main-col .xiezuo-main-col-box img {
  height: 352px;
  width: 318px;
}
.xiezuo-main .xiezuo-right-col {
  opacity: 0;
  pointer-events: none;
  width: 200px;
  height: 356px;
  background: #FFFFFF;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
}
.xiezuo-status {
  display: flex;
  height: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  align-items: center;
  padding: 15px 5px;
}
.xiezuo-status .xiezuo-status-item {
  flex: 1;
  display: flex;
  align-content: space-around;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.total-study-text {
  font-size: 15px;
  color: #666666;
}
.total-study-num {
  font-size: 20px;
  font-weight: 500;
  color: #27C2A5;
}
.last-unit {
  margin-right: 3px;
}
.yxp-composition.yxp-composition-skin-1 {
  background: url(@/assets/read_v2/fjyd_bg.png) center / 100% 100% no-repeat;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-main .xiezuo-left-col {
  height: 450px;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-main-col-box {
  padding-top: 0;
  height: 450px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-main-col-box img {
  width: 279px;
  height: 384px;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-title {
  color: #000;
  font-size: 35px;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-left-col {
  background: #FFFFFF;
  box-shadow: none;
  border-radius: 10px;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-right-col {
  display: block;
  box-shadow: none;
  opacity: 1;
}
.yxp-composition.yxp-composition-skin-1 .back-prev {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 20px;
  background-image: url("@/assets/read_v2/fjyd_icon_fanhui.png");
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 100;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards {
  width: 160px;
  background: #fff;
  margin: 0 auto;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item {
  margin: 0 auto;
  margin-top: 100px;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .text {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #6fa679;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value {
  text-align: center;
  display: block;
  font-size: 21px;
  background: url("@/assets/yufa_v2/gxyf_xbg.png") center / 100% 100% no-repeat;
  height: 50px;
  line-height: 50px;
  color: #3a8046;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.shichang {
  background: url('@/assets/xiezuo_v2/qsxz_naozhong.png') center / 100% 100% no-repeat;
  height: 169px;
  width: 115px;
  margin: 0 auto;
  margin-bottom: 10px;
  line-height: 60px;
  padding-top: 50px;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.shichang div {
  font-size: 16px;
  line-height: 30px;
  color: #3a8046;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.shichang div.num {
  font-weight: bold;
  font-size: 25px;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.xiezuo {
  text-align: center;
  background: url('@/assets/xiezuo_v2/qsxz_zbg.png') center / 100% 100% no-repeat;
  height: 79px;
  width: 168px;
}
.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.xiezuo div {
  display: flex;
  color: #3a8046;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 100%;
  padding: 5px;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-select-course {
  margin-top: 10px;
  display: inline-block;
  color: #076316;
  border-radius: 10px;
  border: 1px solid #076316;
  padding: 3px 12px;
  cursor: pointer;
  font-size: 18px;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-select-course .xiezuo-select-course-default-text {
  color: #076316;
  font-size: 15px;
}
.yxp-composition.yxp-composition-skin-1 .xiezuo-select-course img {
  width: 15px;
  height: 15px;
}

</style>